<template>
    <el-dialog v-model="dialogFormVisible" title="新增料架" width="500">
        <el-form :model="form" :rules="rules">
            <el-form-item label="料架编号" :label-width="formLabelWidth" prop="shelf_id">
                <el-input v-model="form.shelf_id" autocomplete="off" />
            </el-form-item>
            <el-form-item label="孔位数量" :label-width="formLabelWidth" prop="type">
                <el-input v-model.number="form.type" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="addShelfHandle">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { addShelf } from "../api/api.js"
import { ElNotification } from 'element-plus'

const emit = defineEmits(['refreshShelf'])

const formLabelWidth = '140px'
const dialogFormVisible = ref(false)

const form = reactive({
    shelf_id: "",
    type: 1456
})

const addShelfHandle = () => {
    addShelf(form).then(function (response) {
        console.log(response);

        var result = response.result
        var msg = response.msg
        if (result === 1) {
            ElNotification({
                title: 'Success',
                message: msg,
                type: 'success',
            });
            dialogFormVisible.value = false;
            emit("refreshShelf")
        } else {
            ElNotification({
                title: 'Error',
                message: msg,
                type: 'error',
            })
        };
        form.shelf_id = "";
    })
        .catch(function (error) {
            console.log("发生异常!", error);
            ElNotification({
                title: 'Error',
                message: error,
                type: 'error',
            })
        })
        .finally(function () {
            // 总是会执行
        });
}

const rules = reactive({
    shelf_id: [
        { required: true, message: 'Please input', trigger: 'blur' },
    ],
    type: [
        { required: true, message: 'Please input', trigger: 'blur' }
    ],
})

defineExpose({
    dialogFormVisible,
})
</script>
